<template>
	<view>
		<!-- <image src="../../static/images/back.png" mode="" class="back-class" @click="backFn"></image> -->


		     <!--  <swiper
		           class="swiper h-full bgg"
		           :autoplay="true"
		       >
		           <swiper-item
		               v-for="(item, index) in qiye.trademark"
		               :key="index"
		           >
		       		<image :src="item.img" mode="widthFix" style="width: 100%;"></image>
		           </swiper-item>
		       </swiper> -->
		  
		<image src="https://shengyue.yaoyunxin.cn/uploads/images/20240127/20240127105424cb7208522.png" class="bgg"
			 mode=""></image>
		<!-- <view class="center-vip">
			企业详情
		</view> -->
		<view class="enterprise-top">
			<view class="gs">
				<!-- <image class="gs-img" src="../../static/images/toi.png" mode=""></image> -->
				<image :src="qiye.avatar" class="gs-img" mode=""></image>
			</view>
			<view class="enterprise-top-item">
				<view class="gs-name">
					{{qiye.nickname}}
				</view>
			</view>
		</view>
		<view class="phone1">
			<view class="procure-top">
				<view class="xian">

				</view>
				<view class="procure-top-title">
					联系方式
				</view>
			</view>
			<view class="phone-bottom">
				<view class="phone-bottom-item">
					<view class="phone-bottom-item-top">
						<image style="width: 80rpx; height: 80rpx;" src="../../static/images/toi.png" mode=""></image>
					</view>
					<view class="phone-bottom-item-bottom">
						<view class="people">
							{{qiye.pople}}
						</view>
						<view class="tel">
							{{qiye.mobile}}
						</view>
					</view>
					<view class="zhuzhi">
						<image style="width: 52rpx; height: 52rpx; margin-right: 30rpx;" src="../../static/images/fuzhi.png" mode="" @click="copyFn(qiye.mobile)"></image>
						<image style="width: 52rpx; height: 52rpx;" src="../../static/images/phone.png" mode="" @click="phoneFn(qiye.mobile)"></image>
					</view>
				</view>
			</view>
		</view>
		
	<view class="cardd">
	<view class="" v-for="item in qiyegong">
		<view class="news-card  bg-white1 px-[20rpx] py-[32rpx]" @click="tiaoz1(item.id)">
			<view class="news-card-top">
				<view class="">
					<image class="tou" :src="qiye.avatar" mode=""></image>
				</view>
				<view class="qiyeming">
					{{qiye.nickname}}
				</view>
				<view class="zhiding1">
					<image class="zhiding" src="../../static/images/zhidng.png" mode="" v-if="item.is_top==0"></image>
				</view>
			</view>
			<view class="flex news-card-conter">
				<view class="mr-[20rpx]">
					<u-image :src="item.fming"
						width="220" height="200"></u-image>
				</view>
				<view style="width: 65%;">
					<view class="card-titel">{{item.name}}</view>
					<view class="gui">
						<view class="">
							产地：
						</view>
						<view class="">
							{{item.producer}}
						</view>
					</view>
					<view class="phone">
						<view class="">
							联系方式：
						</view>
						<view class="">
							{{item.contacts[0].tel}}
						</view>
					</view>
				</view>
			</view>
			<view class="news-card-bottom">
				<!-- 叶片广卵形或倒卵形，边缘有粗锯齿；花序是伞形，尊绿色，钟状；花瓣绿白色，花药卵形或矩圆形 -->
				{{item.jjxq}}
			</view>
		</view>
	</view>
	
	
	
	
	
	<view class=""  v-for="item in qiyecai">
		<view class="news-card flex bg-white1 px-[20rpx] py-[32rpx]" @click="tiaoz(item.id)">
		    <view class="mr-[20rpx]">
		        <u-image src="https://medicine.sdshengyue.cn/uploads/images/20231226/20231226140102cfc891237.png" width="220" height="200"></u-image>
		    </view>
		    <!-- <view class="news-card-content flex flex-col justify-between flex-1"> -->
			<view style="width: 65%;">
		        <!-- <view class="news-card-content-title text-lg font-medium">{{ item.title }}</view> -->
				<view class="card-titel">{{item.name}}</view>
				<view class="gui">
					<view class="gui-item">
						规格：
					</view>
					<view class="">
						{{item.specifications}}
					</view>
				</view>
				<view class="gui">
					<view class="">
						产地：
					</view>
					<view class="">
						{{item.producer}}
					</view>
				</view>
				<view class="phone">
					<view class="">
						联系方式：
					</view>
					<view class="">
						{{item.contacts[0].tel}}
					</view>
				</view>
		     <!--   <view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx]">
		            {{ item.desc }}
		        </view> -->
		
		       <!-- <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
		            <view>{{ item.create_time }}</view>
		            <view class="flex items-center">
		                <image
		                    src="/static/images/icon/icon_visit.png"
		                    class="w-[30rpx] h-[30rpx]"
		                ></image>
		                <view class="ml-[10rpx]">{{ item.click }}</view>
		            </view>
		        </view> -->
		    </view>
		</view>
	</view>
</view>
	</view>
</template>

<script setup>
	import { getqiyeDetail,getqiyegongDetail,getqiyecaiDetail } from '@/api/news'
	import {
		ref
	} from 'vue'
	import { onShow,onLoad } from '@dcloudio/uni-app'
	const qiye=ref({})
	const getqiye=async()=>{
		qiye.value=await getqiyeDetail({
			q_id:qId.value,
			user_id:user_id.value
		})
		qiye.value.trademark=JSON.parse(qiye.value.trademark)
		// console.log(data);
	}
	
	const qiyegong=ref([])
	const user_id=ref('')
	const getqiyegong=async()=>{
		qiyegong.value=await getqiyegongDetail({
			q_id:qId.value,
			user_id:user_id.value
		})
		qiyegong.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		console.log(qiyegong.value,'qiyegong');
	}
	const tiaoz1=(id)=>{
			uni.navigateTo({
				url:'/pages/collection/supply_details?id='+id
			})
			console.log('111');
	
	}
	const copyFn=(tel)=>{
			// uni.setClipboardData({
			// 				data: tel,
			// 				success: () => {
			// 					uni.showToast({
			// 						title: '复制成功'
			// 					})
			// 				}
			// 			})
			// 			})
			const str = tel;
			const inputo = document.createElement("input");
			document.body.appendChild(inputo);
			inputo.value = str;
			inputo.setAttribute('readOnly', 'readOnly')
			inputo.select();
			document.execCommand("Copy");
			document.body.removeChild(inputo);
			uni.showToast({
									title: '复制成功'
								})
				
			
	
	}
	const phoneFn=(tel)=>{
			let platform = uni.getSystemInfoSync().platform
			switch (platform) {
				case 'android':
					uni.showActionSheet({
					    itemList: [tel,'呼叫'],
					    success:function(res){
							console.log(res);
							if(res.tapIndex==1){
								plus.device.dial(tel,false)        
							}
					    },
					    complete: function(res) {
					       console.log("安卓失败",res)
					    }
					})
					break;
				case 'ios':
					// 使用uni-app提供的借口
					uni.makePhoneCall({
						phoneNumber: tel
		 
					})
					break;
				default:
	}
	}
	const tiaoz=(id,user_id)=>{
		// console.log();
		// if(isLogin.value){
			uni.navigateTo({
				url:'/pages/news_detail/news_detail?id='+id
			})
			console.log('111');
		// }else{
		// 	uni.navigateTo({
		// 		url:"/pages/login/login"
		// 	})
		// }
	
	}
	const qiyecai=ref([])
	const getqiyecai=async()=>{
		qiyecai.value=await getqiyecaiDetail(
		{
			q_id:qId.value,
			user_id:user_id.value
		})
		qiyecai.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		qiyecai.value.forEach(item=>{
			if(item.contacts.length!=0){
				item.contacts[0].tel=mobile(item.contacts[0].tel)
			}
			// item.contacts[0].tel=mobile(item.contacts[0].tel)
			// console.log(item);
		})
		console.log(qiyecai.value,'qiyecai');
	}
	const mobile=(data)=>{
		return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	}
	const qId=ref('')
	onLoad((option) => {
		user_id.value=option.userId
		// console.log(user_id.value,'user_id.value');
		getqiye()
		getqiyecai()
		getqiyegong()
	})
	const backFn = () => {
		uni.navigateBack(-1)
	}
</script>

<style scoped lang="scss">
	.zhuzhi{
		margin-left: auto;
		margin-top: 10rpx;
	}
	.cardd{
		width: 92%;
		margin-left: 4%;
		margin-top: 28rpx;
		padding-bottom: 20rpx;
		position: relative;
		z-index: 2;
	}
	.bgg {
		position: fixed;
		width: 100%;
		top: 0;
		height: 534rpx;
		z-index: 0;
	}

	.back-class {
		width: 48rpx;
		height: 48rpx;
		position: fixed;
		top: 108rpx;
		left: 32rpx;
		z-index: 2;
	}

	.center-vip {
		width: 48rpx;
		height: 48rpx;
		position: fixed;
		top: 108rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 136rpx;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.enterprise-top {
		width: 92%;
		margin-left: 4%;
		position: relative;
		z-index: 2;
		// padding: 24rpx;

		.gs {
			width: 176rpx;
			height: 176rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 5rpx;
			position: absolute;
			right: 28rpx;
			top: -80rpx;

			.gs-img {
				width: 100%;
				height: 100%;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				overflow: hidden;
			}
		}

		.enterprise-top-item {

			width: 694rpx;
			// height: 360rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #FFFFFF;
			margin-top: 160rpx;

			.gs-name {
				margin-top: 49rpx;
				margin-left: 24rpx;
				width: 432rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 12rpx;

			}

			.gs-type {
				width: 144rpx;
				height: 38rpx;
				background: rgba(25, 194, 129, 0.05);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;
				display: flex;
				justify-content: center;
				line-height: 38rpx;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #19C281;
				margin-left: 24rpx;

				.qi {
					display: inline-block;

					.qiye {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}


			}

			.introduce {
				margin-left: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-top: 12rpx;
				margin-bottom: 8rpx;
			}

			.detail {
				margin-left: 24rpx;
				margin-right: 24rpx;

				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #777777;
				line-height: 36rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	.phone1 {
		margin-top: 28rpx;
		// height: 380rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 20rpx;
		width: 92%;
		margin-left: 4%;
		position: relative;
		z-index: 2;
		.procure-top {
			padding-bottom: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			border-bottom: 2rpx solid #F5F5F5;

			.xian {
				width: 6rpx;
				height: 28rpx;
				background: #19C181;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				opacity: 1;
				margin-top: 11rpx;
				margin-right: 8rpx;
			}

		}

		.phone-bottom {

			// margin-top: 20rpx;
			.phone-bottom-item {
				height: 80rpx;
				display: flex;
				margin-top: 20rpx;

				.phone-bottom-item-bottom {
					margin-left: 20rpx;

					.people {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.tel {
						margin-top: 4rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;

					}
				}
			}
		}
	}



	.news-card {
		// border-bottom: 1px solid #f8f8f8;
		margin-bottom: 20rpx;

		border-radius: 16rpx 16rpx 16rpx 16rpx;

		&-content {
			&-title {
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			&-intro {
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}

	.card-titel {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.gui {
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin-top: 8rpx;
	}

	.phone {
		margin-top: 8rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.bg-white1 {
		background-color: #fff;
	}

	.news-card-top {
		display: flex;
		height: 56rpx;
		line-height: 56rpx;
		padding-bottom: 16rpx;
		box-sizing: content-box;
		border-bottom: 2rpx solid #EEE;
		position: relative;
		.qiyeming{
			padding-left: 10rpx;
		}

		.tou {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}

		.zhiding1 {
			position: absolute;
			right: -18rpx;
			bottom: 0;

			.zhiding {
				width: 134rpx;
				height: 52rpx;
			}
		}

	}

	.news-card-conter {
		margin-top: 16rpx;
	}

	.news-card-bottom {
		// margin-top: 16rpx;
		// background: #F8F8F8;
		// border-radius: 8rpx 8rpx 8rpx 8rpx;
		// opacity: 1;
		// font-size: 24rpx;
		// font-family: PingFang SC, PingFang SC;
		// font-weight: 400;
		// color: #AAAAAA;
		// line-height: 36rpx;
		// padding: 20rpx;
		margin-top: 16rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 36rpx;
		padding: 20rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 2;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
		height: 97rpx;
	}
</style>